<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为图片添加和去除边框</title>
<style>

</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<img v-bind:src="url" v-on:mouseover="addBorder" v-on:mouseout="removeBorder">
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data:{
		url : 'images/mr.gif'//图片URL
	},
	methods : {
		addBorder : function(e){
			e.target.style.border = '1px solid green';//设置触发事件元素边框
		},
		removeBorder : function(e){
			e.target.style.border = 0;//移除边框
		}
	}
})
</script>


</body>

</html>



